<template>
    <h1>ref标签用法</h1>
    <div class="container">
        <h1>Fate</h1>
        <h2>stay night</h2>
        <h3 ref="dream">Saber</h3>
        <button @click="showLog">点击我显示h3元素</button>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

  let dream = ref()
  function showLog(){
    console.log(dream.value)
  }
//   暴露给父组件
// 在vue2中使用this.$refs.xxx.yyy()来访问子组件的属性或方法,会默认暴露出所有的子组件属性和方法
// 在vue3中保护起来了,如果想暴露什么给父组件,需要使用defineExpose()来指定暴露的属性和方法
  defineExpose({dream})
</script>

<style scoped>
.container{
    background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
</style>